<template>
	<view class="modules_page" :class="{'p-r-60':more}">
		<scroll-view
		class="scroll-view-tabs" 
		scroll-x="true" 
		:scroll-left="scrollLeft"
		:scroll-with-animation="true"
		:scroll-into-view="toView">
			<view 
			class="scroll-view-item" 
			:class="{ avtive: index === current }" 
			v-for="(item, index) in tabList" 
			:key="index" ref="tab" 
			:data-opt="`item${index}`"
			:id="`item${index}`"
			@click="changTabItem(index)">
				{{ item }}
			</view>
		</scroll-view>
		<text v-if="more" class="scroll-tabs-more" @click="isMore = !isMore">{{!isMore?'展开':'收起'}}</text>
		<view class="vertical-view-tabs" v-if="isMore">
			<scroll-view
			class="vertical-tabs-list" 
			scroll-y="true" 
			:scroll-with-animation="true"
			:scroll-into-view="toView">
				<view 
				class="scroll-view-item" 
				:class="{ avtive: index === current }" 
				v-for="(item, index) in tabList" 
				:key="index" ref="tab" 
				:data-opt="`item${index}`"
				:id="`item${index}`"
				@click="changTabItem(index)">
					{{ item }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
export default {
	components: {
		
	},
	props:{
		tabList:{	//数据列表
			type:Array,
			default:function (){
				return []
			}
		},
		current:{	//索引
			type:Number,
			default:0
		},
		more:{	//显示更多
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			scrollLeft:0,
			isMore:false,
			toView:null
		};
	},
	watch:{
		current(newVal,oldVal){
			this.toView = `item${newVal}`
		}
	},
	methods: {
		changTabItem(index) {
			this.$emit('changeCurrent',index)
		},
	},
	mounted() {}
};
</script>
<style lang="scss" scoped>
.modules_page {
	position: relative;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	&.p-r-60{
		padding-right: 60px;
	}
	.scroll-view-tabs {
		white-space: nowrap;
		width: 100%;
		.scroll-view-item {
			display: inline-block;
			padding: 10px 15px;
			&.avtive {
				color: #007aff;
			}
		}
	}
	.scroll-tabs-more{
		position: absolute;
		right: 0;
		top: 0;
		width: 60px;
		color: #999;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		&::after{
			position: absolute;
			content: '';
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 1px;
			height: 20px;
			background-color: rgba(0,0,0,.1);
		}
	}
	.vertical-view-tabs{
		position: absolute;
		top: 42px;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #FFFFFF;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		box-shadow: 0 5px 10px rgba(0,0,0,.3);
		.vertical-tabs-list{
			height: 300px;
			.scroll-view-item{
				padding: 15px;
				margin: 0 15px;
				border-bottom: 1px solid #ccc;
				&:last-child{
					border: none;
				}
				&.avtive {
					color: #007aff;
				}
			}
		}
	}
}
</style>
